<script setup lang="tsx">
import { ref } from 'vue';

import { DownOutlined } from '@ant-design/icons-vue';

type Operation = 'edit' | 'delete' | 'resetPassword' | 'assignRoles';

interface Emits {
  (e: 'operationClick', type: Operation): void;
}

const emit = defineEmits<Emits>();

function handleClick(type: Operation) {
  emit('operationClick', type);
}
</script>

<template>
  <div class="h-full flex flex-center">
    <AButton class="mini-btn mr-8px" type="link" @click="handleClick('edit')">
      <template #icon>
        <icon-ic-round-edit class="align-sub text-icon" />
      </template>
      <span class="ml-3px">修改</span>
    </AButton>
    <AButton danger class="mini-btn mr-8px" size="small" type="link" @click="handleClick('delete')">
      <template #icon>
        <icon-ic-round-delete class="align-sub text-icon" />
      </template>
      <span class="ml-3px">删除</span>
    </AButton>
    <ADropdown>
      <AButton class="mini-btn" type="link">
        <template #icon>
          <DownOutlined />
        </template>
        <span class="ml-3px">更多</span>
      </AButton>
      <template #overlay>
        <AMenu>
          <AMenuItem>
            <a href="javascript:;" @click="handleClick('resetPassword')">重置密码</a>
          </AMenuItem>
          <!--
 <AMenuItem>
            <a href="javascript:;" @click="handleClick('assignRoles')">分配角色</a>
          </AMenuItem> 
-->
        </AMenu>
      </template>
    </ADropdown>
  </div>
</template>

<style lang="scss" scoped>
.ant-dropdown-link {
  color: #646cff;
}
</style>
